<!-- begin container_header template -->
<div layout="row" flex="100" md-whiteframe="1">
  <div flex layout="row" layout-align="start center">
    <!-- indent -->
    <div hide-xs="true" hide-sm="true" flex-md="5" flex-lg="25" flex-xl="25" style="margin: 8px 0;"></div>
    <!-- content -->
    <div layout="row" layout-margin layout-align="start center" style="margin: 0;"
         flex="100" flex-sm="100" flex-md="90" flex-lg="50" flex-xl="50">
      <!-- color tomato -->
      <div hide-xs="true">
        <md-icon md-svg-src="/img/color-tomato.svg" aria-label="color-tomato" class="color-tomato" style="width: 64px; height: 64px;"></md-icon>
      </div>
      <!-- title -->
      <div layout="column" flex="100">
        <h1 class="md-display-1">{{ page.title }}</h1>
        <div layout="row" layout-align="start end">
          <span class="md-subhead">{{ page.sections | join: ' • '}}</span>
          <div flex></div>
          <span class="md-subhead">{{ page.date | date: '%d.%m.%Y' }}</span>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end container_header template -->
